<template>
  <div class="home">
      <!--  头部 -->
    <el-card style="margin-bottom:10px;" class="header">
      <div slot="header">
        <!-- @tab-click="handleClick": 切换时的事件 -->
        <el-tabs v-model="activeName" class="tab">
          <el-tab-pane label="班级人数" name="classNum"></el-tab-pane>
          <el-tab-pane label="系部统计" name="department"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- v-model="value2" :picker-options="pickerOptions"-->
      <!-- 日期 -->
      <div class="block">
        <div class="dateHandler" @click="dateHandler" ref="date">
          <span class="date" style="color:red;" @click="setDay">今日</span>
          <span class="date" @click="setWeek">本周</span>
          <span class="date" @click="setMonth">本月</span>
          <span class="date" @click="setYear">本年</span>
        </div>
        <!-- 
          type="daterange": 显示类型
          value-format: 定义格式
          v-model： 收集数据
        -->
        <el-date-picker
          v-model="date"
          value-format='yyyy-MM-dd'
          style="width:250px;"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          size="mini"
        ></el-date-picker>

      </div>
    </el-card>
    <el-card>
      <div  class="main">
        <el-row :gutter="10">
          <el-col style="padding-right:10px;" :span="16">
            <div ref="barEcharts" class="top" style="width:100%;height:500px;"></div>
          </el-col>
          <el-col style="border-left:1px solid #DDD;" :span="8">
            <div ref="pieEcharts" class="top" style="width:100%;height:500px;"></div>
          </el-col>
        </el-row>
      </div>
      
    </el-card>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import dayjs from 'dayjs';
export default {
  name: "Home",
  data() {
    return {
      activeName: 'classNum',
      barEcharts:null,
      pieEcharts:null,
      date: [],
      text:'今日',
    };
  },
  mounted() {
    
    this.setDay()
    this.barEcharts = Echarts.init(this.$refs.barEcharts);
    this.barEcharts.setOption({
      // 鼠标移上显示提示信息
      tooltip: {
        show: true
      },
      title: {
        text: "班级人员数量",
        top: 10,
        left: 20
      },
      xAxis: {
        type: "category",
        // 是否显示坐标轴刻度
        axisTick: {
          show: false,
        },
        data: [
          "计应1班",
          "计应2班",
          "计应3班",
          "计应4班",
          "计应5班",
          "计应6班",
          "计应7班",
          "计应8班"
        ]
      },
      yAxis: {
        type: "value"
      },
      grid: {
        bottom: "6%"
      },
      series: [
        {
          data: [40, 26, 44, 37, 45, 34, 41, 51],
          type: "bar",
          barWidth: "50%",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          }
        }
      ]
    });

    // 饼图
    this.pieEcharts = Echarts.init(this.$refs.pieEcharts);
    this.pieEcharts.setOption({
      title:{
        text:'班级信息',
        top:"10"
      },
      // 鼠标移上显示提示信息
      tooltip: {
        show: true
      },
      // 
      legend: {
        top: "85%"
      },

      // 右上角工具箱
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: "pieChart",
          type: "pie",
          radius: [20, 100], // 半径
          center: ["50%", "50%"],
          // roseType: "area", // 类型
          itemStyle: {
            borderRadius: 8 // 圆角半径
          },
          data: [
            { value: 40, name: "计应1班" },
            { value: 26, name: "计应2班" },
            { value: 44, name: "计应3班" },
            { value: 37, name: "计应4班" },
            { value: 45, name: "计应5班" },
            { value: 34, name: "计应6班" },
            { value: 41, name: "计应7班" },
            { value: 51, name: "计应8班" }
          ],
          // 修饰引导线样式
          labelLine: {
            // show:false,
            // 连接到图形的线长度
            length: 10,
            // 连接到文字的线长度
            length2: 10
          }
        }
      ]
    });
  },
  methods: {
    // 本天
    setDay(){
      let day = dayjs().format('YYYY-MM-DD')
      this.date = [day,day]
    },
    // 本周
    setWeek(){
      let start = dayjs().day(1).format('YYYY-MM-DD')
      let end = dayjs().day(7).format('YYYY-MM-DD')
      this.date = [start,end]
    },
    // 本月
    setMonth(){
      let start = dayjs().startOf('month').format('YYYY-MM-DD')
      let end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [start,end]
    },
    // 本年
    setYear(){
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      // console.log(start,end)
      this.date = [start,end]
    },
    // 事件委派 (排他)
    dateHandler(e){      
      // this.dataHandler()
      // 先将dom伪数组转真数组
      let dataArr = [...this.$refs.date.children]
      dataArr.forEach(item => {
        item.style.color = ''
      })
      e.target.style.color = 'red'
      this.text = e.target.innerHTML
      
    },
    dataHandler(){
      if(this.text === '今日'){
        return [34, 26, 54, 33, 45, 54, 41, 51]
      }else if(this.text === '本周'){
        return [25, 56, 44, 30, 75, 42, 61, 31]
      }else if(this.text === '本月'){
        return [36, 66, 34, 60, 50, 30, 41, 61]
      }else{
        return [33, 46, 64, 34, 37, 54, 41, 51]
      }
    }
  },
  watch:{
    // 监听table栏
    activeName(){
      // 监听柱状图
      this.barEcharts.setOption({
        title:{
          text: this.activeName === 'classNum' ? '班级人员数量' : '系部统计'
        },
        xAxis: {
          type: "category",
          data:this.activeName === 'classNum' ? [
          "计应1班",
          "计应2班",
          "计应3班",
          "计应4班",
          "计应5班",
          "计应6班",
          "计应7班",
          "计应8班"
        ]:[
            "电子信息系",
            "会计系",
            "机电系",
            "汽车系",
            "物流系",
            "经贸系",
          ]
        },
        series: [
          {
            data: this.activeName === 'classNum' ?[40, 26, 44, 37, 45, 34, 41, 51]:[1020, 1520, 850, 960, 1325, 768],
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      })
      // 监听饼图
      this.pieEcharts.setOption({
        title:{
          text: this.activeName === 'classNum' ? '系部统计数量' : '系部信息'
        },
        series:[
          {
            data: this.activeName === 'classNum' ? [
            { value: 40, name: "计应1班" },
            { value: 26, name: "计应2班" },
            { value: 44, name: "计应3班" },
            { value: 37, name: "计应4班" },
            { value: 45, name: "计应5班" },
            { value: 34, name: "计应6班" },
            { value: 41, name: "计应7班" },
            { value: 51, name: "计应8班" }
            ]
            :
            [
              { value: 1020, name: "电子信息系" },
              { value: 1520, name: "会计系" },
              { value: 850, name: "机电系" },
              { value: 960, name: "汽车系" },
              { value: 1325, name: "物流系" },
              { value: 768, name: "经贸系" }
            ]
          }
        ],
      })
    },
    // 监听日期
    date(){
       // 监听柱状图
      this.barEcharts.setOption({
        title:{
          // text: this.text
          text: this.activeName === 'classNum' ? '班级人员数量' : '系部统计'
        },
        xAxis: {
          type: "category",
          data:this.activeName === 'classNum' ? [
          "计应1班",
          "计应2班",
          "计应3班",
          "计应4班",
          "计应5班",
          "计应6班",
          "计应7班",
          "计应8班"
        ]:[
            "电子信息系",
            "会计系",
            "机电系",
            "汽车系",
            "物流系",
            "经贸系",
          ]
        },
        series: [
          {
            data: this.dataHandler(),
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ],
      })
      // 监听饼图
      this.pieEcharts.setOption({
        title:{
          text: this.activeName === 'classNum' ? '系部统计数量' : '系部信息'
        },
        series:[
          {
            data: this.activeName === 'classNum' ? [
            { value: 40, name: "计应1班" },
            { value: 26, name: "计应2班" },
            { value: 44, name: "计应3班" },
            { value: 37, name: "计应4班" },
            { value: 45, name: "计应5班" },
            { value: 34, name: "计应6班" },
            { value: 41, name: "计应7班" },
            { value: 51, name: "计应8班" }
            ]
            :
            [
              { value: 1020, name: "电子信息系" },
              { value: 1520, name: "会计系" },
              { value: 850, name: "机电系" },
              { value: 960, name: "汽车系" },
              { value: 1325, name: "物流系" },
              { value: 768, name: "经贸系" }
            ]
          }
        ],
      })
    }
  }
};
</script>

<style lang="less" scoped>
.dateHandler{
  display: inline-block;
}
.date{
  cursor: pointer;
}
.home{
  width: 100%;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .tab {
      width: 1000%;
    }
  }
  .block {
    // display: flex;
    margin-top: 9px;
    span {
      position: relative;
      // top: 5px;
      z-index: 999;
      margin: 0 10px;
      font-size: 14px;
    }
  }
}
</style>